import React, { memo, useContext } from 'react';
import classNames from 'classnames';

import { TabsContext } from './tabs'

export interface TabItemTitleProps {
  index?: number;
}

const TabItemTitle: React.FC<TabItemTitleProps> = memo(({ children, index}) => {
  const context = useContext(TabsContext);
  const handleClick = () => {
    if (context.onSelect && (typeof index === 'number')) {
      context.onSelect(index);
    }
  }
  const classes = classNames('origin-tab-item-title', {
    'origin-tab-item-title-active': context.index === index 
  });
  return (<li className={classes} onClick={ handleClick }>
    { children }
  </li>);
});

export default TabItemTitle;

